<template>
  <div class="form-page">
    <div class="floorNum">
      <div class="floorLeft"></div>
      <div class="floorRight">{{ housenum }}幢楼盘表</div>
    </div>
    <div class="block-wrap">
      <div class="title">
        <div class="infoItem" v-for="(item, index) in infoItem" :key="index">
          <div class="ball" :style="{ background: `${item.className}` }"></div>
          <div class="detail">{{ item.info }}</div>
        </div>
      </div>
    </div>
    <div class="block-wrap floor">
      <div v-for="(table, index) in dataList" :key="index" class="floorTable">
        <el-table
          style="width: 100%"
          :header-cell-style="discountHeaderStyle"
          :cell-style="cellStyle"
          border
          :data="table"
          v-loading="loading"
        >
          <el-table-column label="实际层" width="80" v-if="index === 0">
            <template slot-scope="scope">
              {{ getReally(scope.row.name) }}
            </template>
          </el-table-column>
          <el-table-column
            label="名义层"
            prop="nameflr"
            width="80"
            v-if="index === 0"
          >
            <template slot-scope="scope">
              {{ getNominal(scope.row.name) }}
            </template>
          </el-table-column>
          <el-table-column :label="index + 1 + '单元'" align="center">
            <template slot-scope="scopeItem">
              <el-button
                v-for="(item, index) in scopeItem.row.unit"
                :key="index"
                class="floorItem"
                @click="handleHouseDetail(item)"
              >
                <div class="roomNum">{{ item.roomlabel }}</div>
                <div class="floorBall">
                  <div
                    class="infoItem"
                    v-for="(it, index) in infoItem"
                    :key="index"
                    :class="getBallStyle(item, it) ? 'show' : 'hidden'"
                  >
                    <div
                      class="ball"
                      :class="getBallStyle(item, it)"
                      :style="{ background: `${it.className}` }"
                      v-if="getBallStyle(item, it)"
                    ></div>
                  </div>
                </div>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="房屋详情"
      :visible.sync="dialogVisible"
      width="30%"
      :open="openDialog"
      :close-on-click-modal="false"
    >
      <el-descriptions
        title="不动产中心数据："
        :column="1"
        :colon="false"
        size="medium"
      >
        <el-descriptions-item label="不动产单元号：">{{
          bdcVO.bdcdyh
        }}</el-descriptions-item>
        <el-descriptions-item label="不动产权证号：">{{
          bdcVO.bdccqzh
        }}</el-descriptions-item>
        <el-descriptions-item label="小区名称：">{{
          bdcVO.xqmc
        }}</el-descriptions-item>
        <el-descriptions-item label="门牌号：">{{
          bdcVO.mph
        }}</el-descriptions-item>
        <el-descriptions-item label="户型：">{{
          bdcVO.hx
        }}</el-descriptions-item>
        <el-descriptions-item label="建筑面积：">{{
          bdcVO.jzmj
        }}</el-descriptions-item>
        <el-descriptions-item label="套内面积：">{{
          bdcVO.tnmj
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        title="住房保障中心数据："
        :column="1"
        :colon="false"
        size="medium"
      >
        <el-descriptions-item label="产籍号:">{{
          fcjVO.cjh
        }}</el-descriptions-item>
        <el-descriptions-item label="小区名称：">{{
          fcjVO.xqmc
        }}</el-descriptions-item>
        <el-descriptions-item label="门牌号：">{{
          fcjVO.mph
        }}</el-descriptions-item>
        <el-descriptions-item label="户型：">{{
          fcjVO.hx
        }}</el-descriptions-item>
        <el-descriptions-item label="建筑面积：">{{
          fcjVO.jzmj
        }}</el-descriptions-item>
        <el-descriptions-item label="套内面积：">{{
          fcjVO.tnmj
        }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.stop="handleCloseDialog"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getFloorList, getRoomInfo } from "@/api/propertiesInfo";
export default {
  name: "ForecastDetail",
  data() {
    return {
      infoItem: [
        { className: "#a158db", info: "已签约" },
        { className: "#5efb2c", info: "已备案" },
        { className: "#d9001b", info: "预查封" },
        { className: "#70b603", info: "不动产权登记" },
        { className: "#3247d9", info: "抵押登记" },
        { className: "#dc3232", info: "查封登记" },
        { className: "#347106", info: "预告登记" },
        { className: "#b0af6e", info: "异议登记" }
      ],
      // dataList: [
      //   [
      //     {
      //       name: "six,six",
      //       currentCell: "一单元",
      //       unit: [
      //         {
      //           wqzt: "0",
      //           ycfzt: "0",
      //           ygzt: "0",
      //           yyzt: "0"
      //         },
      //         {
      //           wqzt: "1",
      //           ycfzt: "0",
      //           ygzt: "0",
      //           yyzt: "0"
      //         },
      //         {
      //           wqzt: "2",
      //           ycfzt: "",
      //           ygzt: "0",
      //           yyzt: "0"
      //         }
      //       ]
      //     },
      //     {
      //       name: "five,five",
      //       currentCell: "一单元",
      //       unit: [
      //         {
      //           wqzt: "0",
      //           ycfzt: "",
      //           ygzt: "0",
      //           yyzt: "0"
      //         }
      //       ]
      //     }
      //   ],
      //   [
      //     {
      //       name: "six,ix",
      //       currentCell: "二单元",
      //       unit: [
      //         {
      //           wqzt: "0",
      //           ycfzt: "0",
      //           ygzt: "0",
      //           yyzt: "0"
      //         },
      //         {
      //           wqzt: "1",
      //           ycfzt: "0",
      //           ygzt: "0",
      //           yyzt: "0"
      //         },
      //         {
      //           wqzt: "2",
      //           ycfzt: "",
      //           ygzt: "0",
      //           yyzt: "0"
      //         }
      //       ]
      //     },
      //     {
      //       name: "five,five",
      //       currentCell: "二单元",
      //       unit: [
      //         {
      //           wqzt: "0",
      //           ycfzt: "",
      //           ygzt: "0",
      //           yyzt: "0"
      //         }
      //       ]
      //     }
      //   ],
      //   [
      //     {
      //       name: "six,six",
      //       currentCell: "三单元",
      //       unit: [
      //         {
      //           wqzt: "0",
      //           ycfzt: "0",
      //           ygzt: "0",
      //           yyzt: "0"
      //         },
      //         {
      //           wqzt: "1",
      //           ycfzt: "0",
      //           ygzt: "0",
      //           yyzt: "0"
      //         },
      //         {
      //           wqzt: "2",
      //           ycfzt: "",
      //           ygzt: "0",
      //           yyzt: "0"
      //         }
      //       ]
      //     },
      //     {
      //       name: "five,five",
      //       currentCell: "三单元",
      //       unit: [
      //         {
      //           wqzt: "0",
      //           ycfzt: "",
      //           ygzt: "0",
      //           yyzt: "0"
      //         }
      //       ]
      //     }
      //   ]
      // ],
      dataList: [],
      housenum: "",
      dialogVisible: false,
      dialogInfo: "",
      bdcVO: {},
      fcjVO: {},
      loading: false
    };
  },
  created() {
    this.housenum = this.$route.query.housenum;
    this.getFloorList();
  },
  methods: {
    getFloorList() {
      this.loading = true;
      getFloorList({ housenum: this.housenum })
        .then(res => {
          this.dataList = res.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getBallStyle(item, it) {
      if (item.bazt === "1") {
        if (it.info === "已备案") {
          return true;
        }
      }
      if (item.wqzt === "1") {
        if (it.info === "已签约") {
          return true;
        }
      }
      if (item.ycfzt === "1") {
        if (it.info === "预查封") {
          return true;
        }
      }
      if (item.cqzt === "1") {
        if (it.info === "不动产权登记") {
          return true;
        }
      }
      if (item.dyzt === "1") {
        if (it.info === "抵押登记") {
          return true;
        }
      }
      if (item.djzt === "0") {
        if (it.info === "查封登记") {
          return true;
        }
      }
      if (item.ygzt === "1") {
        if (it.info === "预告登记") {
          return true;
        }
      }
      if (item.yyzt === "1") {
        if (it.info === "异议登记") {
          return true;
        }
      }
    },
    getReally(name) {
      var arr = name.split(",");
      return `${arr[0]} 层`;
    },
    getNominal(name) {
      var arr = name.split(",");
      return `${arr[1]} 层`;
    },
    async handleHouseDetail(row) {
      let data = await getRoomInfo({
        earthnum: row.earthnum ? row.earthnum : 1
      });
      this.bdcVO = data.data.bdcVO;
      this.fcjVO = data.data.fcjVO;
      this.dialogVisible = true;
    },
    openDialog() {},
    handleCloseDialog() {
      this.dialogVisible = false;
    },
    discountHeaderStyle({ row, column, rowIndex, columnIndex }) {
      // if (rowIndex === 1) {
      //   return { display: "none" };
      // }
      return {
        backgroundColor: "#1974F1",
        color: "#ffffff"
      };
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      console.log(columnIndex);
      if (columnIndex === 0 || columnIndex === 1) {
        return {
          backgroundColor: "#C6DEFF",
          color: "#47505C",
          fontSize: "18px",
          fontWeight: "500"
        };
      }
    }
  }
};
</script>

<style lang="scss" scope>
@import "~@/styles/page/list-page.scss";
.floorNum {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e9e9e9;
  background-color: #ffffff;
  .floorLeft {
    width: 3px;
    height: 17px;
    background: #295ec8;
  }
  .floorRight {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    padding-left: 8px;
  }
}
.title {
  display: flex;
  .infoItem {
    width: 100px;
    text-align: center;
    margin: 0 10px;
    .ball {
      margin: 0 auto;
      background-color: red;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .detail {
      margin-top: 16px;
    }
  }
}
.el-table td {
  padding: 0;
}
.cell {
  display: flex;
  justify-content: center;
  .infoItem {
    width: 100px;
    text-align: center;
    margin: 0 10px;
    .ball {
      margin: 0 auto;
      background-color: red;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .detail {
      margin-top: 16px;
    }
  }
}
.block-wrap.floor {
  display: flex;
  display: -ms-flexbox;
  justify-content: space-between;
  .floorTable {
    // max-width: 50%;
    position: relative;
    flex: 1;
    .el-table td.is-center {
      padding: 0;
      .cell {
        padding: 0;
      }
      .floorItem {
        flex: 1;
        border: 0;
        border-radius: 0;
        border-right: 1px solid #eee;
        margin-right: -1px;
        padding: 12px;
        .roomNum {
          padding: 0px 8px 8px 8px;
          font-size: 16px;
          font-weight: 400;
        }
        .floorBall {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          .infoItem {
            flex: 1;
            margin: 0;
            width: auto;
            text-align: center;
          }
        }
      }
    }
  }
}
.block-wrap.floor
  .floorTable
  .el-table
  td.is-center
  .floorItem
  .floorBall
  .infoItem.hidden {
  display: none;
}
.block-wrap.floor
  .floorTable
  .el-table
  td.is-center
  .floorItem
  .floorBall
  .infoItem.show {
  display: block;
}
.el-descriptions {
  padding-top: 10px;
  .el-descriptions__header {
    color: red;
  }
  .el-descriptions-item__label {
    text-indent: 20px;
    font-weight: 600;
  }
}
.el-dialog__body {
  padding: 8px 20px;
}
.el-dialog__title {
  font-weight: 800;
}
.block-wrap.floor .floorTable .el-table td.is-center .floorItem {
  min-height: 47px;
}
</style>
